<template>
   <div class="order">
     <div class="order-tab">
         <ul>
            <li class="active">商品</li>
            <li>详情</li>
            <li>评价</li>
         </ul>
     </div>
      <swiper :options="swiperOption">
        <swiper-slide v-for="(item,index) in imgUrl" :key="item">
            <div class="order-content">
               <img :src="item" alt="">
            </div>
        </swiper-slide>
         
        <div class="swiper-pagination swiper-shoplist" slot="pagination"></div>
      </swiper>
      
      <div v-for="(item,index) in priceinfo" class="order-main">
        <div v-html="'&yen;'+item.price" class="order-price"></div>
        <div v-text="item.name" class="order-name"></div>
        <div v-text="item.info" class="order-info"></div>
        <div class="bgc-1">
            <div v-text="item.postAge" class="order-postAge"></div>
            <span class="order-house">一小时达</span>
            <span v-text="item.freightFare" class="order-freight"></span>
            <span v-text="item.businessStartTime+'-'+item.businessEndTime+'可配送'" class="order-business"></span>
        </div>
        <div class="order-cmmdty">
            <span class='order-rules'>规格</span>
            <span v-text="item.cmmdtyStandard+'/'+item.cmmdtyUnit"></span>
        </div>
      </div>
      
      <div class="order-foot">
          <div class="order-call">联系小店</div>
          <div>购物车</div>
          <div>放入购物车</div>
      </div>

   </div>
</template>

<script>
import { swiper, swiperSlide } from 'vue-awesome-swiper'
     export default {
      data(){
        return {
            orderdata:{},
            imgUrl:{},
            imglen:0,
            swiperOption: {
              pagination: '.swiper-pagination',
              paginationClickable: true,
              loop:true,
              paginationBulletRender(swiper, index, className) {
                return  `<span class="${className} swiper-pagination-bullet-custom" style="
                  width:5px; height:5px; display:inline-block; margin:0 2px;  
                "></span>`;
              }
            },
            priceinfo:[{name:'',price:'',info:'',postAge:'',freightFare:'',businessDateTime:'',businessEndTime:'',businessStartTime:'',isBusinessTime:'',cmmdtyStandard:'',cmmdtyUnit:''}]
        }
        
      },
       
      components: {
        swiper,
        swiperSlide
      },
      created:function(){
         this.$http.jsonp('http://shopping-snxd.suning.com/cmwspds-web/api/cmmdty/getCmmdtyInfoJsonp/1000173_910D_'+this.$route.params.cmmdtyCode+'_getProInfo.htm', {
            jsonp: 'callback',
            jsonpCallback: 'getProInfo'

          }).then((rep) => {
            if(rep.ok){
              this.orderdata = rep.data.resultData;
              var box={};
              for(var i=0; i<rep.data.resultData.cmmdtyImageNum; i++){
                box[i] = '//image1.suning.cn/uimg/cmws/catentries/'+rep.data.resultData.cmmdtyCode+'_'+(i+1)+'_800x800.jpg'
              }
           
              this.imgUrl= box;
              
              this.swiperOption.loop= i == 1 ? false : true;

              this.priceinfo[0].name = rep.data.resultData.cmmdtyName
              this.priceinfo[0].info = rep.data.resultData.basicSalePoint
              this.priceinfo[0].cmmdtyStandard = rep.data.resultData.cmmdtyStandard
              this.priceinfo[0].cmmdtyUnit = rep.data.resultData.cmmdtyUnit
            }
          })

          this.$http.jsonp('http://shopping-snxd.suning.com/cmwspds-web/store/cmmdty/getCmmdtyPriceListJsonp/1000173_910D_'+this.$route.params.cmmdtyCode+'_getPrice.do', {
                params: {
                  _: Math.random()+10000000,
                },
                jsonp: 'callback',
                jsonpCallback: 'getPrice'

            }).then((rep) => {
               if(rep.ok){
                this.priceinfo[0].price = rep.data.resultData[0].price
                
                this.getinfo(rep.data.resultData[0].price,rep.data.resultData[0].priceType);
               }
            })

          this.$http.jsonp('http://snxd.suning.com/cmwsmdm-web/storeInfo/getCurrentBusinessStateJsonp.do', {
                params: {
                  version:'2.0',
                  storeLocation:"910D",
                  _: Math.random()+10000000,
                },
                jsonp: 'callBack',
                jsonpCallback: 'getBizTime'

            }).then((rep) => {
               if(rep.ok){
                let data1 = rep.data;
                  data1.msg?console.log(data1.msg):1;
                  this.priceinfo[0].businessDateTime = data1.data.businessDateTime;
                  this.priceinfo[0].businessEndTime = data1.data.businessEndTime;
                  this.priceinfo[0].businessStartTime = data1.data.businessStartTime;
                  this.priceinfo[0].isBusinessTime = data1.data.isBusinessTime;
               }
            })

      },
      methods:{
        getinfo:function(price,pricetype){
                this.$http.jsonp('http://shopping-snxd.suning.com/cmwspds-web/store/cmmdty/serviceInfoJsonp/910D_'+this.$route.params.cmmdtyCode+'_'+pricetype+'_'+price+'_getDelivery.do', {
                  params: {
                    _: Math.random()+10000000,
                  },
                  jsonp: 'callback',
                  jsonpCallback: 'getDelivery'

              }).then((rep) => {
                 if(rep.ok){
                     
                    this.priceinfo[0].postAge=rep.data.resultData.postAge

                    let text1
                    if(rep.data.resultData.freightFare == '0'){
                        text1 = "免费运";
                    }else if(rep.data.resultData.freightFare == '2'){
                        text1 = "满18免费运";
                    }
                    this.priceinfo[0].freightFare = text1
                 }
              })
        }
      }
     }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
    .order {
      background-color: #fff;
    }
    .order-tab {
        ul {
           font-size: 0;
           text-align: center;
        }
        li {
          font-size: 12px;
          width: 40px;
          height: 40px;
          line-height: 40px;
          padding: 0 12px;
          display: inline-block;
          list-style: none;
        }

    }
    .active {
      color:red;
    }
    .order-content {
      img {
        width: 80%;
        display: block;
        margin: 0 auto;
      }
    }

    .swiper-container {
    overflow: hidden;
    position: relative !important; 
    top: auto; 
    bottom: auto !important; 
    height: auto !important; 
    touch-action: none;
    .swiper-slide {
       touch-action: none;
    } 
}

.order-main {
  text-align: center;
  .order-price {
    font-size: 16px;
    color: #FF782D;
  }
  .order-name {
    font-size: 15px;
  }
  .order-info {
    line-height: 28px;
    font-size: 12px;
    color: #999;
  }
  .bgc-1 {
    background-color: #F0F0F0; 
    span {
      display: inline-block;
      padding: 0 5px;
      height: 16px;
      height: 16px;
      font-size: 12px;
      color: #FFF;
      margin-bottom: 10px;
      background-color: #FFB87A;
      margin-left: 5px;
      text-align: center;
    }
  }
  .order-postAge {
    font-size: 12px;
    color: #999;
  }
  .order-cmmdty {
    height: 44px;
    line-height: 44px;
    text-align: left;
    font-size: 14px;
    .order-rules {
      color: #999;
      font-size: 12px;
      display: inline-block;
      margin: 0 5px;
    }
  }
}

.order-foot {
  width: 100%;
  height: 50px;
  line-height: 50px;
  display: flex;
}
</style>
